<template>
  <div class="task">
    <el-container>
      <el-header style="height:80px;background-color:#0A1018">
        <el-row justify="space-between" type="flex" style="">
          <el-col :span="4" style="height:80px;display:flex;justify-content: center;align-items:center;width: 200px">
          </el-col>
          <el-col :span="16" style="height:80px;display:flex;justify-content: center;align-items:center">
            <el-button class="button" @click="toTack">竞赛</el-button>
            <el-button class="button-right" @click="toMessage">公告</el-button>
            <el-button class="button-right" @click="toAutoPage">配置检测</el-button>
          </el-col>
          <el-col :span="4" style="height:80px;display:flex;justify-content: center;align-items:center">
            <el-button v-if="auth === 2" class="admin" @click="toadmin">后台管理</el-button>
            <el-button class="logout" @click="quit">退出</el-button>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <el-row type="flex" justify="center">
          <el-col :span="24">
            <el-tabs
                type="border-card"
                class="tabs"
                v-model="tabsName"
                @tab-click="submit"
            >
              <el-tab-pane v-for="i in this.sort" :key="i" :label=i
                           v-loading="loading"
                           element-loading-text="拼命获取数据中"
                           element-loading-spinner="el-icon-loading"
                           element-loading-background="rgba(0, 0, 0, 0.8)">
                <TaskList :taskList="taskList"/>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import TaskList from '../components/web/TaskList'

export default {
  name: "task",
  components: {
    "TaskList": TaskList
  },
  data() {
    return {
      auth: 0,
      sort: [],
      taskList: [],
      tabsName: sessionStorage.getItem("tabs"),
      loading: false,
    }
  },
  mounted() {
    let i = "0"
    if (sessionStorage.getItem("tabs")) {
      i = sessionStorage.getItem("tabs")
    } else {
      sessionStorage.setItem("tabs", i)
    }
    this.loading = true
    this.$axios2.post('/task').then((res) => {
      let code = res.data.code
      if (code === 200) {
        this.$axios2.post('/auth').then(async (res) => {
          let code = res.data.code
          if (code === 2) {
            this.auth = 2
          }
          let i = sessionStorage.getItem("tabs")
          let data = this.sort[i]
          await this.$axios2.post("/task/list", {
            "sort": data
          }).then((res) => {
            let data = res.data.data
            for (let i = 0; i < data.length; i++) {
              let list = {}
              list.title = data[i].title
              list.sort = data[i].sort
              list.fraction = data[i].fraction
              this.taskList.push(list)
            }
            this.loading = false
          })
        })
      } else {
        this.$router.push({name: "Login"})
      }
    })
    // 获取分类列表
    this.$axios2.post("/sort/list").then((res) => {
      // this.sort.push(res.data.taskList)
      let data = res.data.sortList
      for (let i = 0; i < data.length; i++) {
        this.sort.push(data[i].name)
      }
    })
  },
  methods: {
    quit() {
      this.$axios2.post('/quit').then((res) => {
        this.$message({
          message: res.data.msg,
          type: 'success'
        });
        this.$router.replace('/')
      })
    },
    toadmin() {
      this.$router.push('/admin/dash')
    },
    toHome() {
      this.$router.push('/').catch(err => {
        err
      })
    },
    toTack() {
      this.$router.push('/task').catch(err => {
        err
      })
    },
    toMessage() {
      this.$router.push('/message').catch(err => {
        err
      })
    },
    submit(name) {
      this.loading = true
      sessionStorage.setItem("tabs", name.index)
      this.taskList.length = 0
      let i = name.index
      let data = this.sort[i]
      this.$axios2.post("/task/list", {
        "sort": data
      }).then((res) => {
        let data = res.data.data
        for (let i = 0; i < data.length; i++) {
          let list = {}
          list.title = data[i].title
          list.sort = data[i].sort
          list.fraction = data[i].fraction
          this.taskList.push(list)
        }
        this.loading = false
      })
    },
    toAutoPage() {
      this.$router.push('/autoweb')
    }
  }
}
</script>

<style scoped>

.task {
  background: url("~@/assets/login-background.png");
  min-height: calc(100vh);
  color: white;
}

.tabs {
  margin-top: 10px;
  background-color: transparent;
  border: none
}

.button {
  margin-left: 0 !important;
  display: flex;
  padding: 0;
  justify-content: center;
  background-size: 100%, 100%;
  background: url("~@/assets/button-background-left.png");
  width: 120px;
  height: 80px;
  border: none;
  color: #03A4CE;
  align-items: center;
}

.button:focus {
  margin-left: 0 !important;
  display: flex;
  padding: 0;
  justify-content: center;
  background-size: 100%, 100%;
  background: url("~@/assets/button-background-left.png");
  width: 120px;
  height: 80px;
  border: none;
  color: #03A4CE;
  align-items: center;
}

.button:hover {
  margin-left: 0 !important;
  display: flex;
  padding: 0;
  justify-content: center;
  background-size: 100%, 100%;
  background: url("~@/assets/button-background-left.png");
  width: 120px;
  height: 80px;
  border: none;
  color: #03A4CE;
  align-items: center;
}


.button-right {
  margin-left: 0 !important;
  display: flex;
  padding: 0;
  justify-content: center;
  background-size: 100%, 100%;
  background: url("~@/assets/button-background-right.png");
  width: 120px;
  height: 80px;
  border: none;
  color: #03A4CE;
  align-items: center;
}

.button-right:focus {
  margin-left: 0 !important;
  display: flex;
  padding: 0;
  justify-content: center;
  background-size: 100%, 100%;
  background: url("~@/assets/button-background-right.png");
  width: 120px;
  height: 80px;
  border: none;
  color: #03A4CE;
  align-items: center;
}

.button-right:hover {
  margin-left: 0 !important;
  display: flex;
  padding: 0;
  justify-content: center;
  background-size: 100%, 100%;
  background: url("~@/assets/button-background-right.png");
  width: 120px;
  height: 80px;
  border: none;
  color: #03A4CE;
  align-items: center;
}

.logout {
  width: 110px;
  border: none;
  font-size: 14px;
  margin: 10px;
  padding-right: 55px;
  height: 48px;
  background: url("~@/assets/button-left.png");
  background-size: 100%, 100%;
  color: #ccc;
}

.logout:hover {
  width: 110px;
  border: none;
  font-size: 14px;
  margin: 10px;
  padding-right: 55px;
  height: 48px;
  background: url("~@/assets/button-left.png");
  background-size: 100%, 100%;
  color: #ccc;
}

.admin {
  width: 110px;
  border: none;
  font-size: 14px;
  margin-left: 20px;
  padding-right: 55px;
  height: 48px;
  background: url("~@/assets/admin-button.png");
  background-size: 100%, 100%;
  color: #ccc;
}

.admin:hover {
  width: 110px;
  border: none;
  font-size: 14px;
  margin-left: 20px;
  padding-right: 55px;
  height: 48px;
  background: url("~@/assets/admin-button.png");
  background-size: 100%, 100%;
  color: #ccc;
}
</style>

<style>
.el-menu.el-menu--horizontal {
  border: none !important;
}

.el-tabs--border-card > .el-tabs__header {
  background-color: #0A1018 !important;
  border: none !important;
}

.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  color: white !important;
  background-color: #006ddd !important;
  border-right-color: #006ddd !important;
  border-left-color: #006ddd !important;
  border-radius: 25px;
}

.el-tabs__nav {
  text-align: center !important;
  left: calc(50% - 208px);
}

.el-tabs--border-card > .el-tabs__header {
  padding-top: 5px;
  height: 46px;
  background-size: 100%;
  background-color: transparent !important;
  background: url("~@/assets/banner-top.png")
}
</style>